<!DOCTYPE html>
<html>
<head>
    <title>门店列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>
    <meta name="apple-mobile-web-app-status-bar-style" content='black' />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="x-rim-auto-match" content="none">
    <link href="/static/css/jquery.mobile-1.4.3.css" rel="stylesheet" type="text/css"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <link href="/static/css/overwrite.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/static/js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.mobile-1.4.3.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=755d808b3fd553009dfe365870749c4a&v=1.0"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchControl/1.4/src/SearchControl_min.css" />
    <script>
        $(function(){
            $('#pageMap').css('visibility','hidden');
            $('#storeLists').click(function(){
                $('#pageMap').css('visibility','visible');
            })

        })
    </script>
</head>
<body>
<div class="storeLists" data-role="page" id="pageHome">
    <div data-role="header" >
        <div data-role="navbar">
            <ul>
                <li><a href="#" >全部地区 <img style="width: 12px"  src="/static/images/icons-png/carat-d-black.png"/></a></li>
                <li><a href="#" >智能排序 <img style="width: 12px"  src="/static/images/icons-png/carat-d-black.png"/></a></li>
                <li>
                    <div style="">
                        <a id="storeLists" data-transition="flip"  href="#pageMap">
                            <img style="width: 40px" height="32px"  src="/static/images/map.png"/>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="storeList" id="storeListUl">
        <ul data-role="listview">

        </ul>
    </div>
    <div id="r-result" class="ui-grid-b ui-box-container">
        <div data-role="controlgroup" data-type="horizontal" data-mini="true">
            <input type="button" class="prev scroll" value="上一页" >
            <input type="button" class="next scroll" value="下一页">
        </div>
    </div>


</div>


<div class="storeLists"  id="pageMap" >
    <div data-role="header" style="box-shadow:  1px 1px 10px #999;z-index: 1" >
        <div data-role="navbar">
            <ul>
                <li><a href="#" >全部地区 <img style="width: 12px"  src="/static/images/icons-png/carat-d-black.png"/></a></li>
                <li><a href="#" >智能排序 <img style="width: 12px"  src="/static/images/icons-png/carat-d-black.png"/></a></li>
                <li>
                    <a id="storeList" href="#pageHome" data-transition='flip'>
                        <div style="">
                            <img style="width: 28px;padding: 6px 0px" height="20px" src="/static/images/list.png"/>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="storeList">
        <div id="allmap" style="width: 100%;height:432px">
        </div>
        <div id="log"></div>
    </div>
</div>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");            // 创建Map实例
    // 创建Map实例
    map.centerAndZoom(new BMap.Point(118.825706,32.053729), 17);
    map.addControl(new BMap.ZoomControl());          //添加地图缩放控件
    var pageNum=1;
    var options = {
        renderOptions:{map: map},
        onSearchComplete: function(results){
            console.log(results);
            var resultsNum= local.getPageCapacity();
            console.log(resultsNum);
            $('#storeListUl ul').empty();
            $("#r-result input.next").unbind('click');
            $("#r-result input.next").bind('click',function(){
                pageNum++;
                local.gotoPage(pageNum);
            })
            $("#r-result input.prev").unbind('click');
            $("#r-result input.prev").bind('click',function(){
                pageNum--;
                if(pageNum<0){
                    pageNum=0;
                }
                if(pageNum>0||pageNum==0){
                    local.gotoPage(pageNum);
                }
            })
            if (local.getStatus() == BMAP_STATUS_SUCCESS){
                // 判断状态是否正确
                var s = [];
                var dataList=new Array();
                var dataList1;
                var phoneNumber='',img_url='/static/images/store01.jpg';
                for (var i = 0; i < results.getCurrentNumPois(); i ++){
                    s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
                    phoneNumber=results.getPoi(i).phoneNumber;
                    uid = results.getPoi(i).uid;
                    var data=results.getPoi(i);
                    if(phoneNumber==undefined){
                        phoneNumber='02586640005';
                        data['phoneNumber'] = '02586640005'
                    }
                    delete data["isAccurate"];//删除isAccurate字段
                    data=JSON.stringify(data);
                    var data1=eval('('+data+')');
                    dataList.push(data1);
                    console.log(data)
                    var li= "<li class='ui-li-has-thumb'>" +
                            "<a class='ui-btn ui-btn-icon-right ui-icon-carat-r'rel='external' data-transition='slide' href='/store/detail/"+ uid +"/'>" +
                            "<img src='"+img_url+"'>" +
                            "<h2><span>" +(i+1)+".</span>"+results.getPoi(i).title+"</h2>" +
                            "<div class='contact'>" +
                            "<img width='12px' src='/static/images/icons-png/phone-black.png'/>" +
                            "<span class='phoneNum'>"+phoneNumber+"</span>" +
                            "</div> " +
                            "<div class='address'>" +
                            "<span>"+results.getPoi(i).address+"</span>" +
                            "</div>" +
                            "</a>" +
                            "</li>";
                    $('#storeListUl ul').append(li);
                }
                $("html,body").animate({scrollTop:0},200);
                dataList1=JSON.stringify(dataList);
                $.ajax({
                    url: '/store/addDataByJson/',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        jsonStr:dataList1
                    }
                })
                .done(function(data) {
                    console.log(data)
                    console.log("success");
                })
                .fail(function(e) {
                    console.log(e)
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
            }
        }
    };
    var local = new BMap.LocalSearch(map,options);
    local.search("百信药房");
</script>
</body>
</html>